<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div id="app">
    <p>methods计数：{{sum()}} - {{sum()}} - {{sum()}}</p>
    <p>computed计数：{{sum2}} - {{sum2}} - {{sum2}}</p>
    <button @click="sum">computed使用</button>

    <!-- 单击事件将停止传递 -->
    <a @click.stop="doThis">2222</a>

    <!-- 提交事件将不再重新加载页面 -->
    <form @submit.prevent="onSubmit"></form>

    <!-- 修饰语可以使用链式书写 -->
    <a @click.stop.prevent="doThat"></a>

    <!-- 也可以只有修饰符 -->
    <form @submit.prevent></form>

    <!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
    <!-- 例如：事件处理器不来自子元素 -->
    <div @click.self="doThat">...</div>

    <input @keyup.enter="submit" value="enter按钮" />
    <input @keydown.tab="submit2" value="tab按钮" />
</div>
</body>
</html>

<style>


</style>


<script src="../js/v2.6.10/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            count:0
        },
        methods: {
            doThis(){
                console.log("1");
            },
            submit(){
                alert('回车enter')
            },
            submit2(){
                alert('tab')
            },
            sum(){
                console.log("methods:",this.count)
                return this.count+10;
            }
        },
        computed: {
            sum2(){
                console.log("computed:",this.count)
                return this.count+10;
            }


        }
    })
</script>